<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        .header {
            height: 160px;
            background: darkseagreen;
        }

        .menu {
            height: 90px;
            background-color: grey;
        }

        .tabBox>.content {
            height: 500px;
            text-align: center;
            line-height: 500px;
            border: 1px solid #000;
        }

        .footer {
            height: 500px;
            background-color: #000;
        }

        .slideMenu {
            position: fixed;
            right: 30px;
            top: 50%;
            transform: translateY(-50%);
            padding: 5px;
            border-radius: 3px;
            background: cornsilk;
        }

        .slideMenu li {
            line-height: 30px;
            margin: 10px;
            border: 1px solid #000;
            padding: 5px;
        }

        .slideMenu .active {
            background: #6ff;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="header">

    </div>
    <div class="menu">

    </div>
    <div class="tabBox">
        <div class="content">01</div>
        <div class="content">02</div>
        <div class="content">03</div>
        <div class="content">04</div>
        <div class="content">05</div>
        <div class="content">06</div>
        <div class="content">07</div>
        <div class="content">08</div>
        <div class="content">09</div>
        <div class="content">10</div>
    </div>
    <div class="footer"></div>

    <ul class="slideMenu">
        <li>tab01</li>
        <li>tab02</li>
        <li>tab03</li>
        <li>tab04</li>
        <li>tab05</li>
        <li>tab06</li>
        <li>tab07</li>
        <li>tab08</li>
        <li>tab09</li>
        <li>tab10</li>
    </ul>
</body>
<script>
    var tabBox = document.getElementsByClassName("tabBox")[0];
    var conList = tabBox.children;

    var slideMenu = document.getElementsByClassName("slideMenu")[0];
    var menuList = slideMenu.children;

    var footer = document.getElementsByClassName("footer")[0];

    // 滚动时导航切换
    window.onscroll = function () {

        // 获取滚动条的滚动距离
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

        // 判断在哪个区间

        for (var i = 0; i < conList.length; i++) {
            var start = conList[i].offsetTop;
            if (i == conList.length - 1) {  //如果是最后一个  end  找 footer的  offsetTop
                var end = footer.offsetTop;
            } else {
                var end = conList[i + 1].offsetTop; // 其他的找 i+1 的  offsetTop
            }
            if (scrollTop > start - 100 && scrollTop <= end - 100) {
                for (var j = 0; j < menuList.length; j++) {
                    menuList[j].className = "";
                }
                menuList[i].className = "active";
            }

        }

    }

    for (var i = 0; i < menuList.length; i++) {
        var menu = menuList[i];
        menu.setAttribute("index", i);

        menu.onclick = function () {
            var index = this.getAttribute("index");

            // start  滚动条的的原位置
            var start = document.documentElement.scrollTop || document.body.scrollTop;//2000
            // end 就是滚动条停止的位置
            var end = conList[index].offsetTop; //200

            document.documentElement.scrollTop = end;

            // var speed = (end - start) / 20;  // -180
            // console.log(speed);

            // // 从上往下滚   临界值 >  end
            // // 从下往上滚   临界值 <  end
            // console.log(end);
            // var timer = setInterval(function () {
            //     // 当前滚动的位置
            //     var nowScroll = document.documentElement.scrollTop || document.body.scrollTop;
            //     if (end > start) {  //从上往下滚 
            //         if (nowScroll >= end) {
            //             clearInterval(timer);
            //             document.documentElement.scrollTop = end;
            //             return false;
            //         }
            //     } else {  //从下往上滚
            //         if (nowScroll <= end) {
            //             clearInterval(timer);
            //             document.documentElement.scrollTop = end;
            //             return false;
            //         }
            //     }
            //     document.documentElement.scrollTop = nowScroll + speed;

            //     // console.log(11111)
            // }, 10)

        }
    }

</script>

</html>